<template>
    <view>
        <!-- 顶部标题-->
        <view class="top">
            <uni-nav-bar left-icon="left" :statusBar="true" titleSize="30px" leftText="返回" right-icon="more-filled"
                title="机器管理" @clickLeft="back" :fixed="true" backgroundColor="#3286ed" color="#fff" />
            <!-- <u-transition :show="transitionShow" mode="zoom-out" duration="350">
			  <view class="pop" >
			  	 <view class="inner"></view>
			  	 <view class="" style="background-color: #4c4c4c;padding: 10px;border-radius: 5px;">
			  	 	<view class="box">
			  			<uni-icons @click="clickBtn" color="#fff" type="search" size="24" style="vertical-align:middle;"></uni-icons>
			  			<span @click="clickBtn">搜索</span>
			  		</view>
			  		<view class="box">
			  			<uni-icons color="#fff" type="scan" size="24" style="vertical-align:middle;"></uni-icons>
			  			<span>扫一扫</span>
			  		</view>
			  	 </view>
			  </view>
		 </u-transition> -->
        </view>

        <!-- 筛选栏-->
        <view style="position: fixed;z-index: 100;width:100%;" v-if="isShow==true">
            <!-- <dropdown-screen ref='dropdown'  style="position: fixed;"  :listArr='listArr' :itemArr="itemArr" :isTouchPrevent="true" @finish="finishFn" ></dropdown-screen> -->
            <uni-row class="demo-uni-row">
                <uni-col :span="13">
                    <zb-dropdown-menu style="width: 100%" z-index="12">
                        <zb-dropdown-item :options="option1" v-model="page.status" @change="changeFn">
                        </zb-dropdown-item>
                        <zb-dropdown-item :options="modelList" v-model="page.model" @change="modelChangeFn">
                        </zb-dropdown-item>
                    </zb-dropdown-menu>
                </uni-col>
                <uni-col :span="1">
                    <view class="title" style="color:#c3c3c3">|</view>
                </uni-col>
                <uni-col :span="4">
                    <view class="title" @click="searchFn">筛选</view>
                </uni-col>
                <uni-col :span="1">
                    <view class="title" style="color:#c3c3c3">|</view>
                </uni-col>
                <uni-col :span="5">
                    <view class="title" style="display:flex;justify-content:space-around; ">
                        <view>
                            <uni-icons @click="clickBtn" type="search" size="24" color="#c3c3c3"></uni-icons>
                        </view>
                        <view>
                            <uni-icons @click="clickFn" type="scan" size="24" color="#c3c3c3"></uni-icons>
                        </view>
                    </view>
                </uni-col>
            </uni-row>
        </view>

        <!-- 显示搜索结果的浮动框 -->
        <view class="floatBox">
            <text class="m-state">机器状态：{{machineState}}</text>
            <text class="m-model">机器型号：{{machineModel}}</text>
            <text class="m-name">产品名称：{{machineName}}</text>
            <text class="m-ware">仓库名称：{{machineWare}}</text>
            <text class="resultBox">相关数据共 ({{total}}) 条</text>
        </view>

        <view v-if="isShow===true" style="width:100%;height: 88rpx;display: block"></view>

        <!-- 搜索框 -->
        <view>
            <u-search v-if="isShow===false" style="height;40px;background-color: #fff;padding: 10px;" @clear="clearFn"
                :clearabled="true" showAction @custom="customFn" @search="search"
                v-model.enter="page.machineSerialNumber" height='30' placeholder="请输入机器序列号" shape="square"
                actionText='取消'></u-search>
            <!-- 搜索历史记录 -->
            <view v-if="isShow===false && historyList.length>0 && close1==true">
                <u-cell title="搜索历史" style="background-color: #fff;margin-top: 3px;">
                    <template #right-icon>
                        <uni-icons type="trash" @click="delFn" size="20"></uni-icons>
                    </template>
                </u-cell>
                <view class="history">
                    <span v-for="(item,index) in historyList" :key="index">
                        <u-tag :text="item" borderColor="#eee" color="#eee" plain size="mini" closable :show="close1"
                            @close="closeFn( item,index)"></u-tag>
                    </span>
                </view>
            </view>
            <view v-if="isShow===false && searchList.length" v-for="(item) in searchList" :key="item.id"
                class="machine-list">
                <view>机器序列号：{{item.machineSerialNumber}}</view>
                <view class="machine-body">
                    <view>
                        <view style="padding: 3px 0;">产品名称：{{item.productName}}</view>
                        <view>型号：{{item.model}}</view>
                        <view style="padding-top: 7px; font-size:10px">
                            <uni-tag type="primary" size="mini" :inverted="true" v-if="item.status==0" text="正常">
                            </uni-tag>
                            <uni-tag type="primary" size="mini" :inverted="true" v-if="item.status==1" text="不可用">
                            </uni-tag>
                            <uni-tag type="primary" size="mini" :inverted="true" v-if="item.status==2" text="使用中">
                            </uni-tag>
                            <uni-tag type="primary" size="mini" :inverted="true" v-if="item.status==3" text="未激活">
                            </uni-tag>
                        </view>
                    </view>
                    <view class="destials" @click="add(item.machineSerialNumber)">
                        <navigator
                            :url="'/pages/machine/machineChildren/machineChildren?machineSerialNumber='+item.machineSerialNumber"
                            open-type="navigate">
                            详情
                        </navigator>
                    </view>
                </view>
            </view>
        </view>

        <view class="contentList">
            <view v-if="isShow==true" class="machine-list" v-for="(item) in list" :key="item.id">
                <view>机器序列号：{{item.machineSerialNumber}}</view>
                <view class="machine-body">
                    <view>
                        <view style="padding-bottom: 5px;">产品名称：{{item.productName}}</view>
                        <view>型号：{{item.model}}</view>
                        <view style="padding-top: 7px; font-size:10px">
                            <uni-tag type="primary" :inverted="true" size="mini" v-if="item.status==0" text="正常">
                            </uni-tag>
                            <uni-tag type="primary" :inverted="true" size="mini" v-if="item.status==1" text="不可用">
                            </uni-tag>
                            <uni-tag type="primary" :inverted="true" size="mini" v-if="item.status==2" text="使用中">
                            </uni-tag>
                        </view>
                    </view>
                    <view class="destials">
                        <navigator
                            :url="'/pages/machine/machineChildren/machineChildren?machineSerialNumber='+item.machineSerialNumber"
                            open-type="navigate">
                            详情
                        </navigator>
                    </view>
                </view>
            </view>
            <view v-if="list.length ==0 " class="BGC"></view>
        </view>

        <!-- 筛选 右边弹框 -->
        <u-popup class="popBox" :show="popupShow" mode="right" customStyle="margin-top:44px"
            overlayStyle="margin-top:44px" @close="popupShow=false" :closeOnClickOverlay="true">
            <u-cell>
                <template #title>
                    <view style="font-size:16px;font-weight:600;color:#fd9540;width:250px;">机器筛选</view>
                </template>
            </u-cell>
            <u-cell title="产品名称" @click="pickBtn" name="产品名称">
                <template #value>
                    <view>{{page.productName}}</view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </template>
                <!-- <template #label>
					<view v-if='!formData.sponsorName && ruleShow==true' style="font-size: 12px;color:red">请输入发起人</view>
				</template> -->
            </u-cell>
            <view class="inputBox">
                <view class="title">产品序列号</view>
                <view>
                    <u--input clearable v-model="page.productNo" placeholder="请输入产品序列号"></u--input>
                </view>
            </view>
            <u-cell title="仓库名称" @click="pickBtn" name="仓库名称">
                <template #value>
                    <view>{{page.warehouseName}}</view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </template>
            </u-cell>
            <view class="searchButton">
                <view class="btn" @click="deleteBtn">重置</view>
                <view class="btn" style="background-color: #fd6c03;color: #fff;" @click="searchBtn">确认</view>
            </view>
        </u-popup>

        <!-- 产品名称 -->
        <u-action-sheet :actions="productNameList" @close="productNameShow=false" title="产品名称" :show="productNameShow"
            @select="selectFn"></u-action-sheet>
        <!-- 仓库名称 -->
        <u-picker :show="warehouseShow" :columns="warehouseList" @cancel="warehouseShow=false" @confirm="confirmFn"
            @close="warehouseShow"></u-picker>
        <!-- <u-action-sheet :actions="warehouseList"  title=="仓库名称" :show="warehouseShow" @select="selected"></u-action-sheet> -->


    </view>
</template>

<script>
    import {
        machineList
    } from '@/api/machine/machine.js'
    import {
        listProduct,
        selectProductQuantityList
    } from '@/api/product/product.js'
    import {
        listWarehouse
    } from '@/api/warehouse/warehouse.js'
    import dropdownScreen from '@/components/dropdown-screen/dropdown-screen'
    export default {
        components: {
            dropdownScreen
        },
        data() {
            return {
                floatShow: true, //搜索结果的浮动框
                machineState: '', //机器状态
                machineName: '', //产品名称
                machineModel: '', //产品型号
                machineWare: '', //仓库名称
                options2: [{
                    text: '产品名称',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }, {
                    text: '产品型号',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }, {
                    text: '机器型号',
                    style: {
                        backgroundColor: '#fd6c03'
                    }
                }],
                close1: true, //搜索历史记录
                isShow: true,
                transitionShow: false, //控制搜索框出现
                index: true,
                popupShow: false, //控制筛选弹框
                productNameShow: false, //产品名称
                warehouseShow: false,
                list: [],
                searchList: [],
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    status: null,
                    model: null,
                    machineSerialNumber: '',
                    productName: '',
                    productNo: '',
                    warehouseName: '',
                },
                total: 0, //总数
                modelList: [{
                    text: '型号',
                    value: null
                }], //产品型号
                historyList: [], //历史记录
                option1: [{
                        text: '机器状态',
                        value: null
                    },
                    {
                        text: '正常',
                        value: 0
                    },
                    {
                        text: '不可用',
                        value: 1
                    },
                    {
                        text: '使用中',
                        value: 2
                    },
                ],
                productNameList: [], //产品名称
                warehouseList: [], //仓库地址
            };
        },
        created() {
            // this.page.pageNum=1
            this.initData()
            this.getProductList()
            this.getWareHouseList()
        },
        onReachBottom() {
            this.getMoreList()
        },
        onPullDownRefresh() {
            // 下拉加载
            this.formData = {
                    pageSize: 10,
                    pageNum: 1,
                },
                this.list = []
            setTimeout(() => {
                this.initData()
                uni.stopPullDownRefresh()
            }, 1000)
        },
        methods: {
            add(val) {
                console.log(val);
            },
            //返回按钮
            back() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 获取仓库
            async getWareHouseList() {
                const {
                    rows
                } = await listWarehouse({
                    pageNum: 1,
                    pageSize: 1000000,
                })
                let arr = []
                rows.forEach((item) => {
                    arr.push(item.warehouseName)
                })
                this.warehouseList.push(arr)

                // console.log(this.warehouseList);
            },
            async initData() {
                const res = await machineList(this.page)
                // console.log(res);
                this.list = res.rows
                this.total = res.total
                if (!this.page.pageNum == 1) {
                    this.page.pageNum = 1
                }
            },
            // 上划加载
            async getMoreList() {
                this.page.pageNum++
                if (this.list.length == this.total) {
                    return false
                }

                const res = await machineList({
                    pageNum: this.page.pageNum,
                    pageSize: 10,
                    status: this.page.status,
                    model: this.page.model,
                    machineSerialNumber: this.page.machineSerialNumber
                })
                // console.log(res.rows);
                if (res.rows.length == 0 || res.rows === null) {
                    return false
                }
                if (this.isShow === false) {
                    this.searchList.push(...res.rows)
                } else {
                    this.list.push(...res.rows)
                }
            },
            // 筛选出型号
            async getProductList() {
                let {
                    rows
                } = await listProduct()
                let res1 = await selectProductQuantityList({
                    pageNum: 1,
                    pageSize: 1000,
                })

                let arr = []
                res1.rows.forEach((value, index) => {
                    // 产品名称列表
                    arr.push(value.model)
                })
                arr = arr.map(item => ({
                    text: item,
                    value: item,
                }))
                // console.log(arr);
                this.modelList = this.modelList.concat(arr)
                this.productNameList = rows.map(item => ({
                    name: item.productName,
                    value: item.productName
                }))


            },
            // 点击放大镜搜索
            clickBtn() {
                this.isShow = false
            },

            // 搜索
            async search(val) {
                this.close1 = false
                if (!this.page.machineSerialNumber) {
                    this.searchList = []
                    return false
                }
                const res = await machineList(this.page)
                this.searchList = res.rows
                // console.log( this.searchList);
                // 将搜索的数据放到历史记录表
                // 数组去重
                let idx = this.historyList.findIndex((item) => item === val);
                console.log(this.historyList);
                console.log(idx);
                if (idx !== -1) {
                    this.historyList.splice(idx, 1);
                }
                this.historyList.unshift(this.page.machineSerialNumber)
            },
            // 搜索框取消按钮
            customFn() {
                this.isShow = true
                this.page.machineSerialNumber = ''
                this.searchList = []
            },
            // 搜索框里面叉号
            clearFn() {
                this.page.machineSerialNumber = ''
                this.searchList = []
                this.close1 = true
            },
            // 扫码
            clickFn() {
                console.log('1111');
                // 调起条码扫描
                uni.scanCode({
                    scanType: ['qrCode'],
                    success: function(res) {
                        console.log(res);
                        uni.navigateTo({
                            url: "/pages/machine/events/events?machineSerialNumber=" + res.result
                        })
                    }
                });
            },

            // 单个删除历史记录
            closeFn(item, index) {
                console.log(item, index);
                this.historyList.splice(index, 1)
                console.log(this.historyList);
                // this.close1 = false
            },
            // 全部删除历史记录
            delFn() {
                this.historyList = []
            },
            // 机器状态条件筛选
            changeFn(e) {
                console.log(e);
                this.machineState = e.text
                // 每次条件查询要保证pageNum:1
                this.page.pageNum = 1
                this.page.status = e.value
                this.list = []
                this.initData(this.page)
            },
            // 型号筛选
            modelChangeFn(e) {
                console.log(e);
                this.machineModel = e.text
                // 每次条件查询要保证pageNum:1
                this.page.pageNum = 1
                this.page.model = e.value
                this.list = []
                this.initData(this.page)
            },
            // 筛选按钮弹出
            searchFn() {
                this.popupShow = true
            },
            // 筛选中的产品名称
            pickBtn(e) {

                console.log(e);
                if (e.name == '产品名称') {
                    this.productNameShow = true
                }
                if (e.name == '仓库名称') {
                    this.warehouseShow = true
                }
            },
            // 产品名称选择
            selectFn(e) {
                console.log(e.name);
                this.machineName = e.name
                this.page.productName = e.name
                this.productNameShow = false
            },
            // 仓库选择
            confirmFn(e) {
                console.log(e);
                this.machineWare = e.value[0]
                this.page.warehouseName = e.value[0]
                this.warehouseShow = false
            },
            searchBtn() {
                this.initData(this.page)
                this.popupShow = false
            },
            deleteBtn() {
                this.page.warehouseName = ''
                this.page.productNo = ''
                this.page.productName = ''
            }



        }
    }
</script>

<style lang="scss" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .BGC {
        width: 100%;
        min-height: 400px;
        background-image: url('@/static/images/bgc.png');
        background-size: 100% 200px;
        background-repeat: no-repeat;
        margin: 200px 0;
    }

    .top {
        position: relative;

        .pop {
            position: absolute;
            right: 5px;
            top: 44;

            z-index: 9999999;

            .inner {
                width: 0px;
                height: 0px;
                border: 5px solid;
                margin-left: 70px;
                border-color: transparent transparent #4c4c4c transparent;
            }

            .box {
                min-width: 80px;
                height: 35px;
                line-height: 35px;
                border-bottom: solid 1px transparent;
                color: #fff;
                padding-bottom: 5px;

                span {
                    margin-left: 10px;
                }
            }
        }
    }

    // 下拉选择框
    .demo-uni-row {
        margin-bottom: 10px;
        width: 100%;
        // position: fixed;
        // z-index: 100;
        /* QQ、字节小程序文档写有 :host，但实测不生效 */
        /* 百度小程序没有 :host，需要设置block */
        /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
        display: block;
        /* #endif */

        .title {
            height: 48px;
            line-height: 48px;
            background-color: #ffffff;
            text-align: center;
            font-size: 16px;

        }
    }

    .contentList {
        margin-bottom: 70px;

        .machine-list {
            background-color: #fff;
            padding: 8px 15px;
            border: solid 1px #eee;
            margin: 7px 3px;

            .machine-body {
                display: flex;
                justify-content: space-between;
                font-size: 13px;

                .destials {
                    color: #fd9540;
                    padding-top: 20px;
                }
            }

            .machine-body>view {
                padding: 5px 0;
            }
        }
    }



    // 搜索框历史记录
    .history {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 0px 10px 10px 5px;

        span {
            display: inline-block;
            min-width: 35px;
            height: 22px;
            line-height: 22px;
            // background-color: red;
            text-align: center;
            margin: 5px;
        }
    }

    .popBox {
        position: relative;

        // 筛选的输入框
        .inputBox {

            padding: 8px 10px;
            width: 100%;
            border-width: 0px 1px 1px 1px;
            border-style: solid solid solid solid;
            border-color: #eee #eee #eee #eee;

            .title {
                padding-bottom: 5px;
            }

        }

        // 筛选确认框
        .searchButton {
            width: 100%;
            height: 40px;
            line-height: 40px;
            position: absolute;
            left: 0px;
            bottom: 0px;
            display: flex;
            justify-content: space-around;

            .btn {
                width: 50%;
                border: solid 1px #eee;
                text-align: center;
            }
        }

    }

    //数据浮动框
    .floatBox {
        position: fixed;
        bottom: 0px;
        right: 0px;
        padding: 10px;
        width: 100%;
        height: 65px;
        background-color: rgb(253, 149, 64);
        color: #ffffff;
        font-size: 10px;

        text {
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 2px;
            width: 40%;
        }
    }
</style>
